<!doctype html>
<html style="font-size:50px;">
<head>
    <meta charset="utf-8">
    <title>会员特权</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no" />
    <link type="text/css" rel="stylesheet" href="../css/repair.css" />
</head>
<body>
  <div class="body">
    <header>
        <img class="pc" src="../img/repair_banner_pc.jpg">
        <img class="mobile" src="../img/repair_banner.jpg">
    </header>
    <div class="repair-body">
        <div class="ad">
            <img src="../img/repair_ad.jpg">
        </div>
        <div class="btn">延保查询</div>
        <div class="middle"></div>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <th>保修到期</th>
                <th>购买型号</th>
                <th>延保申请</th>
                <th>产品类型</th>
                <th>序列号</th>
            </tr>
            <tr>
                <td>2010-01-01</td>
                <td>最多10位数</td>
                 <td><button>申请延保</button></td>
                <td>冰箱啊</td>
                 <td>12345678</td>
            </tr>
             <tr>
                <td>2010-01-01</td>
                <td>最多10位数</td>
                 <td><button>申请延保</button></td>
                <td>冰箱啊</td>
                 <td>12345678</td>
            </tr>
             <tr>
                <td>2010-01-01</td>
                <td>最多10位数</td>
                 <td><button>申请延保</button></td>
                <td>冰箱啊</td>
                 <td>12345678</td>
            </tr>
             <tr>
               <td>2010-01-01</td>
                <td>最多10位数</td>
                 <td><button>申请延保</button></td>
                <td>冰箱啊</td>
                 <td>12345678</td>
            </tr>
        </table>    
    </div>
    <div class="block"></div>
    <div class ="repair-body notes">
        <h6>延保注意事项</h6>
        <ul type="square">
            <li>三个月延保产品品类：洗/干衣机、冰箱、蒸/烤箱、洗碗机、微波炉、灶具、油烟机、消毒柜、对开门/多门/嵌入式冰箱</li>
             <li>三个月延保的适用人群范围：只针对新购机并在购机三个月内成功注册产品的会员 </li>
              <li>三个月延保仅限整机保修，有效期为1年，此基础上延长三个月。</li>
              <li>不符合以上资格的产品无法显示在延保查询里面，详情请咨询客服</li>
        </ul>
    </div>
    <footer>
        返回首页
    </footer>
    <div class="alert hide">
      <div class="alert-body">
        <h6>提示</h6>
        <img src="../img/alert.png" />
        <p>延保成功</p>
        <button>完成</button>
      </div>
    </div>
     <div class="alert-error hide">
      <div class="alert-body">
        <h6>提示</h6>
        <img src="../img/alert_error.png" />
        <p>延保失败</p>
        <button>完成</button>
      </div>
    </div>
    </div>
     <script type="text/javascript" src="../jquery.min.js"></script>
      <script type="text/javascript">
      //成功样式
      $('td button').click(function(){
        if($('.alert').hasClass('hide')){
            $('.alert').removeClass('hide');
        }
      })
      //失败样式
      // $('td button').click(function(){
      //   if($('.alert-error').hasClass('hide')){
      //     $('.alert-error').removeClass('hide');
      //   }
      // })
      $('.alert button,.alert-error button').click(function(){
        if(!$('.alert').hasClass('hide')){
          $('.alert').addClass('hide');
        }
        if(!$('.alert-error').hasClass('hide')){
          $('.alert-error').addClass('hide');
        }
      })
      </script>
</body>